/**
 * 保养员信息
 * author Forjune
 * @param{bool} show 是否显示表单和横线
 * @param{ref} cRef 组件ref
 * @param{function} handleSelect 筛选框改变的事件
 * @param{String} title 组件标题
 * @param{String} person 选择框的label
 * @param{String} maintenanceInfo 人员详细信息
 * @param{List} userList 所有用户列表
 * @param{String} defaultVal 默认选中值
 */
import React, { useEffect, useImperativeHandle } from 'react';
import TitleLine from 'components/common/titleLine'
import { Select, Form } from 'antd';
import './index.styl';
import noImg from 'assets/no_Img.png'
const { Option } = Select;

function MaintenanceMessage(props) {
  const { cRef, show, handleSelect, title, maintenanceInfo, userList, defaultVal, form, person, tipPerson } = props;
  const { getFieldDecorator, validateFields, setFieldsValue } = form
  useImperativeHandle(cRef, () => ({
    validateFields
  }));
  useEffect(() => {
    if (defaultVal !== '') {
      setFieldsValue({
        maintain: defaultVal
      })
    } else {
      setFieldsValue({
        maintain: ''
      })
    }
  }, [defaultVal, setFieldsValue])
  const handleChange = (value, e) => {
    handleSelect(value, e.key);
  };

  return (
    <div className="maintenanceMessage">
      <TitleLine title={title}></TitleLine>
      {show ? (
        <>
          <div className="maintenance">
            <Form.Item label={`选择${person}`} colon={false}>
              {getFieldDecorator('maintain', {
                rules: [{ required: true, message: `请选择${person}` }],
                validateTrigger: ['onBlur', 'onChange']
              })(
                <Select
                  placeholder={`请选择${person}`}
                  className="self-select"
                  onChange={handleChange}
                  showSearch={true}
                  getPopupContainer={triggerNode => triggerNode.parentNode}
                >
                  {userList &&
                    userList.length > 0 &&
                    userList.map(item => {
                      return (
                        <Option value={item.name + item.groupName} key={item.id}>
                          {item.name + '   ' + item.groupName}
                        </Option>
                      );
                    })}
                </Select>
              )}
            </Form.Item>
            <div className="tip">
              <span>{'只可选择本企业' + (tipPerson || '巡检员')}</span>
            </div>
          </div>
          <div className="self-hr"></div>
        </>
      ) : null}
      <div className="maintenance-detail">
        <div className="detail-cell">
        <div className="maintenance-image">
          <div style={{height: '14px',lineHeight: '14px'}}>员工头像</div>
          <img src={maintenanceInfo && maintenanceInfo.headImage ? maintenanceInfo.headImage : noImg} alt="" />
        </div>
        <div className="maintenance-mes">
          <div className="label">
            <span>姓名</span>
            <span>员工编号</span>
            <span>手机号</span>
            <span>部门</span>
          </div>
          <div className="value">
            <span>{maintenanceInfo && maintenanceInfo.name}</span>
            <span>{maintenanceInfo && maintenanceInfo.userNo}</span>
            <span>{maintenanceInfo && maintenanceInfo.mobile}</span>
            <span>{(maintenanceInfo && maintenanceInfo.groupName) ||
              (maintenanceInfo && maintenanceInfo.companyName)}</span>
          </div>
        </div>
        </div>
      </div>
    </div>
  );
}
export default Form.create()(MaintenanceMessage)
